<template>
  <div class="Pay">
    <div>
      <img :src="payUrl"/> 
    </div>
    <svg class="icon" aria-hiddden="true">
          <use xlink:href="#icon-wechat_pay"></use>
    </svg>
    <span>使用微信进行支付</span>
    <el-descriptions title="订单详情">
			<el-descriptions-item label="订单号"></el-descriptions-item>
			<el-descriptions-item label="创建时间"></el-descriptions-item>
			<el-descriptions-item label="产品名称"></el-descriptions-item>
			<el-descriptions-item label="商品描述"></el-descriptions-item>
			<el-descriptions-item label="购买数量"></el-descriptions-item>
			<el-descriptions-item label="购买用户"></el-descriptions-item>
			<el-descriptions-item label="手机号"></el-descriptions-item>
			<el-descriptions-item label="总价格">
			</el-descriptions-item>

		</el-descriptions>
  </div>
</template>
<script>
  // 引入生成二维码的插件
  import qrCode from "qrcode";
  // 引入获取订单和支付的方法
  import *as api from "@/api/pay"
  export default{
    data(){
      return{
        order_id: "",//订单号
			//请求的订单详情
			orderDetail: {
				//数据初始化
				orderDetail: [
					{
						productName: "",
						description: "",
						quantity: "",
					},
				],
			},
			payUrlRes: {}, //请求获取的支付结果
			payUrl: "", //支付地址
      }
    },
    created(){
      let {order_id}=this.$route.query
      this.order_id=order_id
      if(!this.order_id){
        this.$alert("本次交易取消，请重新提交","提示",{
          confirmButtonText: "确定",
          acllback:(action)=>{
              this.$router.push({path:'/preorder'})
          }
        })
         return;
      }
     Promise.all([api.getOrderDetails(order_id),api.pay(this.order_id)])
      .then(res=>{
        console.log(res)
        this.orderDetail=res[0].data.data;
        let paymentRes=res[1].data;
        if(paymentRes.state){
          // 获取支付地址
         let payUrl=paymentRes.code_url
          // 生成二维码
          qrCode.toDataURL(payUrl,(err,img)=>{
            console.log(img )
            this.payUrl=img
          })
        }
      })
      this.queryPayStatusInterval=setInterval(()=>{
          api.queryPayStatus(this.order_id)
          .then(res=>{
            console.log(res)
            if(res.data.state){
              this.$router.push({path: "/payment/paysuccess"})
            }
            // else{
            //   this.$router.push({path:"/vipmanager/charge"})
            // }
          })
      },1000)
    },
    beforeDestroy(){
        clearInterval(this.queryPayStatusInterval)
    }
  }
</script>